import classnames from 'classnames'
import { differenceBy } from 'lodash'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { useState } from 'react'
import { Channel } from '@/types/data'
import { addChannel, delChannel } from '@/store/actions/home'
import { Toast } from 'antd-mobile'

type Props = {
  hide: () => void
  onChangeChannel: (key: string) => void
}
const Channels = ({ hide, onChangeChannel }: Props) => {
  const dispatch = useDispatch()
  const [edit, setEdit] = useState(false)

  const changeEdit = () => {
    setEdit(!edit)
  }
  const { userChannel, active } = useSelector((state: RootState) => state.home)

  const optionChannel = useSelector((state: RootState) => {
    const allChannel = state.home.allChannel
    const userChannel = state.home.userChannel

    return differenceBy(allChannel, userChannel, 'id')
  })

  const onAddChannel = (channel: Channel) => {
    dispatch(addChannel(channel))
  }

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={hide} />
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', { edit: edit })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">
              {edit ? '点击删除频道' : '点击进入频道'}
            </span>
            <span className="channel-item-edit" onClick={changeEdit}>
              {edit ? '完成' : '编辑'}
            </span>
          </div>
          {/* 这里放置我的频道 */}
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}
            {userChannel.map((it) => {
              return (
                <span
                  onClick={() => {
                    if (edit) {
                      // 现在是编辑, 做删除
                      if (userChannel.length <= 4) {
                        Toast.show('再删就没啦')
                        return
                      }
                      dispatch(delChannel(it.id))
                    } else {
                      // 隐藏
                      hide()
                      // 跳转频道
                      onChangeChannel(it.id + '')
                    }
                  }}
                  key={it.id}
                  className={classnames(
                    'channel-list-item',
                    { selected: Number(it.id) === Number(active) }
                    // Number(it.id) === Number(active) ? 'selected' : ''
                  )}>
                  {it.name}
                  {!['0', active].includes(it.id.toString()) && (
                    <Icon type="iconbtn_tag_close" />
                  )}
                </span>
              )
            })}
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>

          {/* 这里放置推荐频道 */}
          <div className="channel-list">
            {optionChannel.map((it) => {
              return (
                <span
                  key={it.id}
                  className="channel-list-item"
                  onClick={() => {
                    onAddChannel(it)
                  }}>
                  + {it.name}
                </span>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
